<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06列表渲染</title>
</head>
<body>
<!--
1. 列表显示
   数组：v-for / index
   对象：v-for / key
2. 列表的更新显示
   删除item
   剔除item
-->
    <div id="demo">
       <h2>测试：v-for 遍历数组</h2>
       <ul>
         <li v-for="(p,index) in persons" :key="index">
           {{index}}---{{p.name}}---{{p.age}}
           ---<button @click="deleteP(index)">删除</button>
           ---<button @click="updateP(index , { name:'Cat' , age:22 })">更新</button>
         </li>
       </ul>

       <h2>测试：v-for 遍历对象</h2>
         <ul>
           <li v-for="(value,key) in persons[1]" :key="key">
             {{key}}----{{value}}
           </li>
         </ul>
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script>
      // vue本身只是监视了persons的变化，并没有监视数组内部数据的改变
      // vue重写了数组中的一系列改变数组内部数据的方法(1.先调用原生的；2.更新界面(数据绑定))-->数组内部改变，界面自动变化
      new Vue({
        el: '#demo',
        data:{
          persons:[
            {name: 'Tom',age: 18},
            {name: 'Jack',age: 19},
            {name: 'Bob',age: 20},
            {name: 'Rose',age: 21},
          ]
        },
        methods:{
          // 删除persons中指定index的p
          deleteP(indexP){
            this.persons.splice(indexP,1);
          },
          updateP(index,newP){
            //并没有改变persons本身，数组内部发生变化，但并没有调用变异方法，vue不会更新界面
            //this.persons[index] = newP;

            this.persons.splice(index,1,newP);
          }
        }
      });
    </script>
</body>
</html>
